<template>
    <div class="talent-container">
        <div class="chart" id="chart_left2"></div>
    </div>
</template>

<script>
    import { getAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin'

    export default {
        name: 'talent',
        mixins: [mixinDevice],
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                scaleData: []
            }
        },
        mounted() {
            this.getStatisticsData()
        },
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getStatisticsData()
            },
        },
        methods: {
            async getStatisticsData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/InfusionBottleInLeft', params)
                let scaleData = []
                if (res && res.success) {
                    for (let i = 0; i < res.result.length; i++) {
                        scaleData.push({
                            value: res.result[i].totalWastePresentValue,
                            name: res.result[i].area
                        })
                    }
                    this.scaleData = scaleData
                    this.getEchartLeft2()
                }
            },
            getEchartLeft2() {
                let myChart = this.$echarts.init(document.getElementById('chart_left2'))
                let scaleData = this.scaleData
                // let scaleData = [{
                //   name: '博士',
                //   value: 5
                // },{
                //   name: '硕士',
                //   value: 10
                // },{
                //   name: '本科',
                //   value: 10
                // },{
                //   name: '专科',
                //   value: 10
                // },{
                //   name: '国防科大',
                //   value: 5
                // },{
                //   name: '大厂专家',
                //   value: 5
                // }];
                let rich = {
                    white: {
                        color: '#ddd',
                        align: 'center',
                        padding: [3, 0]
                    }
                }
                let placeHolderStyle = {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
                let data = []
                let color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
                for (let i = 0; i < scaleData.length; i++) {
                    data.push({
                        value: scaleData[i].value,
                        name: scaleData[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 6,
                                shadowBlur: 10,
                                borderColor: color[i],
                                shadowColor: color[i]
                            }
                        }
                    }, {
                        value: 2,
                        name: '',
                        itemStyle: placeHolderStyle
                    })
                }

                let option = {
                    series: [{
                        name: '',
                        type: 'pie',
                        clockWise: false,
                        radius: ['66%', '68%'],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'outside',
                                    color: '#ddd',
                                    formatter: (params) => {
                                        let percent = 0
                                        let total = 0
                                        for (let i = 0; i < scaleData.length; i++) {
                                            total += scaleData[i].value
                                        }
                                        percent = ((params.value / total) * 100).toFixed(0)
                                        if (params.name !== '') {
                                            return params.name + '{white|:'+ percent + '%}'
                                        } else {
                                            return ''
                                        }
                                    },
                                    rich: rich
                                },
                                labelLine: {
                                    length: 10,
                                    length2: 30,
                                    show: true,
                                    color: '#00ffff'
                                }
                            }
                        },
                        data: data
                    }]
                }


                myChart.setOption(option, true)
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        },
        beforeDestroy() {

        }
    }
</script>

<style lang="less" scoped>
    .talent-container {
        .chart {
            height: 3rem;
        }
    }
</style>
